import { useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import { useLocation, useNavigate } from "react-router-dom";
import { getSearchAll, getSerarchDetail, PramsFace } from "@/api/search/index";
import AritistList from "@/components/AritistList/index";
import PlayMusicList from "@/components/PlayMusicList/index";
import SongSheet from "@/components/SongSheet/index";
import VideoList from "@/components/VideoList";
import classNames from "classnames";
import { Loading } from "react-vant";

const tabs = [
  {
    text: "综合",
    value: "1018",
  },
  {
    text: "单曲",
    value: "1",
  },
  {
    text: "歌单",
    value: "1000",
  },
  {
    text: "视频",
    value: "1014",
  },
  {
    text: "歌手",
    value: "100",
  },
  {
    text: "播客",
    value: "1009",
  },
  {
    text: "歌词",
    value: "1006",
  },
  {
    text: "专辑",
    value: "10",
  },
  {
    text: "MV",
    value: "1004",
  },
  {
    text: "用户",
    value: "1002",
  },
];
const SearchDeatil = () => {
  const { state } = useLocation();
  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);
  const tabRef = useRef<HTMLDivElement | null>();
  const [userList, setUserList] = useState([]);
  const [songList, setSongList] = useState<playList[]>([]);
  const [songSheetList, setSongSheetList] = useState([]);
  const [videoList, setVideoList] = useState([]);
  const [type, setType] = useState("1018");
  const query = useRef<PramsFace>({
    type: "1018",
    keywords: state,
    limit: 10,
    offset: 1,
  });
  useEffect(() => {
    const fetchData = () => {
      setLoading(true);
      if (type == "1018") {
        getSearchAll(state).then((result) => {
          setUserList(result);
        });
      }
      if (type == "1") {
        query.current.type = type;
        getSerarchDetail(query.current).then((result) => {
          setSongList(result);
        });
      }
      if (type == "1000") {
        query.current.type = type;
        getSerarchDetail(query.current).then((result) => {
          setSongSheetList(result.list);
        });
      }
      if (type == "1014") {
        query.current.type = type;
        getSerarchDetail(query.current).then((result) => {
          console.log(result);
          setVideoList(result.list);
        });
      }
      if (type == "100") {
        query.current.type = type;
        getSerarchDetail(query.current).then((result) => {
          console.log(result);
          setUserList(result.list);
        });
      }
      setTimeout(() => {
        setLoading(false);
      }, 300);
    };
    fetchData();
    return () => {};
  }, [state, type]);

  const changeTab = (value: string, dom: HTMLDivElement) => {
    setType(() => value);
    const currentDomoffsetLeft = dom.offsetLeft; // 点击dom距离最外围的距离
    const currentCenter = currentDomoffsetLeft; // 设置基准值
    const bodyWidth = document.body.clientWidth; // 屏幕宽度
    const center = bodyWidth / 2; // 设置对比基准值
    if (currentCenter > center) {
      // 当dom距离左侧的距离 大于 屏幕一半 则滚动到 dom左侧的距离 - 屏幕的一半
      tabRef.current?.scrollTo({
        left: currentCenter - center,
        behavior: "smooth",
      });
    } else {
      tabRef.current?.scrollTo({
        left: 0,
        behavior: "smooth",
      });
    }
  };
  return (
    <div className={styles.SearchDeatil}>
      <div className={styles.header}>
        <div className={styles.left} onClick={() => navigate(-1)}>
          <div className={styles.icon}>
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
            >
              <path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"></path>
            </svg>
          </div>
          <div className={styles.text}>搜索详情</div>
        </div>
        <div className={styles.right}>
          <div>
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
            >
              <path d="M440 112m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
              <path d="M440 440m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
              <path d="M440 768m72 0l0 0q72 0 72 72l0 0q0 72-72 72l0 0q-72 0-72-72l0 0q0-72 72-72Z"></path>
            </svg>
          </div>
        </div>
      </div>
      <div className={styles.SearchDeatilWrap}>
        <div className={styles.tab}>
          <div
            className={styles.tabItemWrap}
            ref={(ref) => (tabRef.current = ref)}
          >
            {tabs.map((it) => {
              return (
                <div
                  className={classNames(
                    styles.tabItem,
                    type == it.value ? styles.currentItem : ""
                  )}
                  onClick={(e) =>
                    changeTab(it.value, e.target as HTMLDivElement)
                  }
                  key={it.value}
                >
                  <span>{it.text}</span>
                  <div></div>
                </div>
              );
            })}
          </div>
        </div>
        {loading ? (
          <div className={styles.loading_wrap}>
            <Loading color="red" />
          </div>
        ) : (
          <div className={styles.contaner}>
            {type == "1018" ? (
              <div>
                <div className={styles.userWrap}>
                  <div className={styles.title}>歌手</div>
                  <AritistList list={userList} />
                </div>
                {/* <div className={styles.songSheetWrap}>
                        <div className={styles.title}>歌单</div>
                      </div> */}
              </div>
            ) : (
              ""
            )}
            {type == "1" ? (
              <div>
                <div className={styles.songWrap}>
                  <div className={styles.title}>单曲</div>
                  <PlayMusicList list={songList} />
                </div>
                {/* <div className={styles.songSheetWrap}>
                        <div className={styles.title}>歌单</div>
                      </div> */}
              </div>
            ) : (
              ""
            )}
            {type == "1000" ? (
              <div>
                <div className={styles.songWrap}>
                  <div className={styles.title}>歌单</div>
                  <SongSheet list={songSheetList} />
                </div>
              </div>
            ) : (
              ""
            )}
            {type == "1014" ? (
              <div>
                <div className={styles.songWrap}>
                  <div className={styles.title}>视频</div>
                  <VideoList list={videoList} />
                </div>
              </div>
            ) : (
              ""
            )}
            {type == "100" ? (
              <div>
                <div className={styles.songWrap}>
                  <div className={styles.title}>视频</div>
                  <AritistList list={userList} />
                </div>
              </div>
            ) : (
              ""
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default SearchDeatil;
